<template>
  <div>
    <TypeNav />
    <div class="main">
      <div class="py-container">
        <!--bread-->
        <SearchBread />

        <!--selector-->
        <SearchSelector />

        <!--details-->
        <Searchdetails/>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetSearch } from '@/api';
import SearchSelector from './SearchSelector/SearchSelector.vue'
import Searchdetails from './Searchdetails/Searchdetails.vue'
import SearchBread from './SearchBread/SearchBread.vue'
import { mapState } from 'vuex';
export default {
  name: 'Search',
  components: { SearchSelector,Searchdetails,SearchBread },
  data() {
    return {
      // 准备一个空对象
      parameterOBj:{}
    }
  },
  computed:{  
    ...mapState({
      breadList:state =>state.Search.breadList,  //取出商品参数对象的数据
      trademark:state =>state.Search.trademark,  //取出商品品牌相关的数据
    })
  },
  methods: {
    async getSearchData(value){
      let res = await reqGetSearch( {...this.$route.query,...value})
      // 判断状态码为200
      if (res.code === 200) {
        // 将数据存入小仓库
      this.$store.commit('GETSRARCHDATA',res.data)    
      }
    }
  },
  watch:{
    //监听发送请求的参数对象变化
    parameterOBj(newValue){
        //使用新的参数发送请求
      this.getSearchData(newValue)
    },
    //监听商品参数的变化
    breadList:{
      // 开启深度监视
      deep:true,
      handler(newValue){
        //暂存商品参数的数组
        let arr = [];
        //将参数对象转换为参数数组
        for(let item in newValue){
          arr.push(newValue[item])
          // console.log(newValue[item]);
        }
        //将参数数组添加进发送请求的参数对象
        this.$set(this.parameterOBj,'props',arr)
      }
    },
    //监听商品的变化
    trademark(newValue){
      this.$set(this.parameterOBj,'trademark',newValue)
    }
  },
  mounted() {
   this.getSearchData()
  },
};
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;

  .py-container {
    width: 1200px;
    margin: 0 auto;

    

   
  }
}
</style>  